'use strict';

var React = require('react');
var PropTypes = require('prop-types');
var createReactClass = require('create-react-class');

var {
    View,
    Platform,
    WebView
} = require('react-native');
var WKWebView = require('react-native-webview').WebView;

var Canvas = createReactClass({
    propTypes: {
        style: PropTypes.object,
        context: PropTypes.object,
        render: PropTypes.func.isRequired,
        onLoad: PropTypes.func,
        onLoadEnd: PropTypes.func,
    },

    useWKWebview() {
      return !!WKWebView && WKWebView.hasAbility && WKWebView.hasAbility();
    },

    render() {
        var contextString = JSON.stringify(this.props.context);
        var renderString = this.props.render.toString();
        const props = {
          automaticallyAdjustContentInsets: false,
          scalesPageToFit: (Platform.OS === 'android' ? false : this.useWKWebview()),
          contentInset: {top: 0, right: 0, bottom: 0, left: 0},
          source: {html: "<style>*{margin:0;padding:0;}canvas{transform:translateZ(0);}</style><canvas></canvas><script>var canvas = document.querySelector('canvas');(" + renderString + ").call(" + contextString + ", canvas);</script>"},
          opaque: false,
          underlayColor: 'transparent',
          style: this.props.style,
          javaScriptEnabled: true,
          scrollEnabled: false,
          onLoad: this.props.onLoad,
          onLoadEnd: this.props.onLoadEnd,
          originWhitelist: ['*'],
        }
        return (
            <View style={this.props.style}>
              {
                this.useWKWebview() ? <WKWebView {...props} /> : <WebView {...props} />
              }
            </View>
        );
    }
});

module.exports = Canvas;
